<template>
	<view class="page">
		<view class="search-box">
			<input class="search-box-inp" @click="toSearchDo()"  type="text" placeholder="请输入电影名" v-model="movie_title"
			 disabled />
		</view>
		<view class="search-list">
			<view v-for="(list,index) in movieList" :key="index" class="search-pic-text" @click="toDetails(list.movie_id,list.score)">
				<image class="search-pic" :src="picUrl+list.face_pic"></image>
				<view class="search-text">
					{{list.movie_title}}
				</view>
			</view>

		</view>
		<!-- 补底部导航栏距离 -->
		<view class="full-tabbar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieList: [],
				movie_title: '',
				page: 1,
				listRows: 20,
				totalPage: 1,
				picUrl: this.$pictureUrl
			}
		},
		onLoad() {
			this.searchData(this.movie_title, this.page, this.listRows);
			uni.setStorageSync('search_flag', false);
			uni.setStorageSync('search_keyword', '');
			this.listenKeyword();// 关键字监听
		},
		onPullDownRefresh(){
			console.log('下拉刷新')
			this.searchData(this.movie_title, this.page, this.listRows);
			this.listenKeyword();// 关键字监听
		},
		onReachBottom() { // 页面触底事件
			console.log('触底了');
			console.log('当前page：'+this.page);
			console.log('总页数：'+this.totalPage);
			this.page = this.page + 1;
			if (this.page > this.totalPage) {
				return ;
			}
			this.searchData(this.movie_title, this.page, this.listRows);
		},
		methods: {
			toSearchDo() { // 打开搜索页
				uni.navigateTo({
					url: 'search_do',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				});
			},
			toDetails(movie_id,score) { // 跳转详情
				uni.navigateTo({
					url: '../details/details?movie_id='+movie_id+'&score='+score
				});
			},
			searchData(movie_title, page, listRows) { // 搜索数据
				uni.request({
					url: this.$serverUrl + '/api/search/selMovieDetails?movie_title=' + movie_title + '&page=' + page + '&listRows=' +
						listRows,
					success: (ret) => {
						if (ret.statusCode !== 200) {
							console.log('请求失败', ret);
							return;
						}
						if (ret.data.code == 0) {
							// 取数据并赋值
							this.movieList = this.movieList.concat(ret.data.data.list);
							this.totalPage = ret.data.data.totalPage;
						} else {
							console.log('未取得数据');
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			listenKeyword() { // 关键字监听
				let me = this;
				let search_keyword = '';
				let k = setInterval(() => {
					search_keyword = uni.getStorageSync('search_keyword');
					this.movie_title = search_keyword;
					if (uni.getStorageSync('search_flag')) {
						uni.setStorageSync('search_flag', false);
						this.movieList = [];
						this.page = 1;
						this.searchData(this.movie_title,this.page,this.listRows);
					}
				
				}, 500);

			}
		}
	}
</script>

<style>
	/**搜索框**/
	/* #ifdef H5 */
	.search-box {
		position: fixed;
		top: 44px;
		left: 0px;
		z-index: 99;
		width: 92%;
		background-color: #FFFFFF;
		padding: 10upx 30upx 20upx 30upx;
	}

	/* #endif */
	/* #ifdef APP-PLUS */
	.search-box {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		width: 92%;
		background-color: #FFFFFF;
		padding: 10upx 30upx 20upx 30upx;
	}

	/* #endif */
	/* #ifdef MP-WEIXIN */
	.search-box {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		width: 92%;
		background-color: #FFFFFF;
		padding: 10upx 30upx 20upx 30upx;
	}

	/* #endif */
	.search-box-inp {
		height: 68upx;
		border: 1px solid #ddd;
		border-radius: 68upx;
		font-size: 28upx;
		padding: 0upx 30upx;
	}

	/**电影列表**/
	.search-list {
		margin-top: 110upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 0upx 18upx 0upx 32upx;
	}

	.search-pic-text {
		display: flex;
		flex-direction: column;
		width: 26%;
		padding: 20upx;
		background-color: #FFFFFF;
		margin-right: 10upx;
		margin-bottom: 10upx;
	}

	.search-pic {
		width: 100%;
		height: 140upx;
	}

	.search-text {
		font-size: 30upx;
		line-height: 40upx;
		color: #3c4a55;
		margin: 10upx 0upx;
	}

	.psearch-zt-pic {
		width: 100%;
		height: 272upx;
		margin-bottom: 10upx;
	}

	.search-title-r {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28upx;
		color: #007aff;
	}

	/*************/
	.page {
		/* background-color: #FFFFFF; */
	}
</style>
